<template>
    <view class="page_main">
        <HeaderBar title="精品路线"></HeaderBar>
        <view class="card">
            <view class="swiper">
                <wd-swiper :list="swiperImgList" autoplay v-model:current="current" value-key="imgUrl" height="312rpx" @click="handleClick" @change="onChange"></wd-swiper> 
            </view>
            <view class="info">
                <view class="text">{{ dataObj.name }}</view>
                <view class="title">
                    <view class="name">{{ product.name }}</view>
                    <view class="price">
                        ￥<view class="num">{{ startPrice }}</view>起
                    </view>     
                </view>
                <view class="describe">
                    {{product.memo}}
                </view>
                <view class="tags">
                    <wd-tag plain v-for="(item,index) in product.tags" :key="index">{{ item.name }}</wd-tag>
                </view>        
            </view>
        </view>
        <view class="container">
            <SetMenu :thalisArray="thalisList" @checkedID="checkedID"></SetMenu>
            <DateList :dateList="dateList" @getDateObj="getDateObj"></DateList>
            <ContentList :contentObj="contentObj"></ContentList>   
        </view>
        <view class="calling_card">
            <view class="card_info">
                <view class="card_title">
                    <view class="card_n">
                        {{dataObj.name}}
                    </view>
                    <view class="card_t">
                        {{dataObj.name}}
                    </view>
                </view>
                <button class="card_btn" @click="enterStore"><i class="iconfont icon-w_shangdian"></i>进入店铺</button>  
            </view>
            <view class="card_b">
                <view class="card_tag">
                    {{dataObj.createTime}}年入驻
                </view>
                <view class="card_tel" @click="handleCallPhone">
                    <i class="iconfont icon-kefu"></i>
                    联系我们
                </view>        
            </view>    
        </view>  
        <view class="next">
            <button class="n_btn" :class="selected?'selected':''" :disabled="!selected" @click="clickNext">下一步</button>
        </view>
    </view>
</template>

<script setup>
import HeaderBar from "@/components/HeaderBar/index.vue";
import SetMenu from "@/premiumRouteSubPack/components/setMenu/index.vue" ;
import DateList from "@/premiumRouteSubPack/components/dateList/index.vue" ;
import ContentList from "@/premiumRouteSubPack/components/contentList/index.vue" ;
import { queryTravelProductDetail ,queryMerchant , queryProductThaliPrice} from "@/premiumRouteSubPack/api/index";
import { ref, onMounted, nextTick } from 'vue';
import {onLoad} from "@dcloudio/uni-app";
const current = ref(0)
const swiperImgList = ref([
	'https://i0.hdslb.com/bfs/archive/6708bd13d3f74958a7c1381cf6a32b6d270c0ecf.jpg',
	'https://img01.haolizi.net/2021/08/06/45/e/6/45e64cc40aa461e302a8365ba6c86312.png',
	'https://img1.baidu.com/it/u=2222665852,1606584561&fm=253&fmt=auto&app=138&f=JPEG?w=1097&h=500'
])
const id = ref(null);
const startPrice = ref(null);
const merchantId = ref(null);
const product = ref({});
const thalisList = ref([]);
const thaliId = ref();   //套餐ID
const dateList = ref([]);
const contentObj = ref({})
const selectDate = ref({})

onLoad((option) => {
    // 获取页面跳转时传递的参数
    id.value = option.id;
    startPrice.value = option.price;
    merchantId.value = option.merchantId;
    // // 调用后端接口
    getDetails(id.value);
	getMerchant(merchantId.value);
});
// const tags = ref([
//     {label:'4A级'},
//     {label:'含导游'},
//     {label:'付费停车'},
// ])
const dataObj =ref({})
//获取商品详情
const getDetails = async (id) => {
  try {
    const res = await queryTravelProductDetail(id);
    const { thalis, feature, trip, cost, instructions, headImageUrl } = res.result;

    // 批量更新响应式数据
    product.value = res.result;
    thalisList.value = thalis;
    contentObj.value = { feature, trip, cost, instructions };
    swiperImgList.value = headImageUrl ? [{ imgUrl: headImageUrl }] : [];
    
  } catch (error) {
    console.error('加载产品详情失败:', error);
  }
};
const getDateList = (id)=>{
    // console.log('日期Id',id);
    const params ={
        id:id,
        thaliDate: formatDate(new Date()),
    }
    queryProductThaliPrice(params).then((res)=>{
        console.log('日期列表',res);
        let {result} = res;
        dateList.value = result;
    })
}

const formatDate =(date)=> {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}
const getMerchant =(id)=>{
    queryMerchant(id).then((res)=>{
      let {result} = res;
      dataObj.value = result
      // console.log('店铺信息',res);
    })
}
const checkedID = (id)=>{
    thaliId.value = id;
    getDateList(id)
    
}
const getDateObj = (e)=>{
    selectDate.value = e 
}
const selected = ref(true)
const handleClick = ()=>{}
const onChange = ()=>{}
const clickNext = ()=>{
    // 检查是否选择了套餐和日期
    if (!thaliId.value || !selectDate.value) {
        uni.showToast({
            title: '请选择套餐和日期',
            icon: 'none'
        });
        return;
    }
    const merchantInfo = JSON.stringify(product.value);
    // 构造存储的数据对象
    const orderInfo = {
        thaliId: thaliId.value, // 套餐ID
        thaliName: thalisList.value.find(thali => thali.id === thaliId.value)?.name, // 套餐名称
        date: selectDate.value.thaliDate, // 选择的日期
        adultPrice: selectDate.value.adult, // 套餐成人价格
        childrenPrice: selectDate.value.children, // 套餐儿童价格
        adultNumVal: product.value.adultNum,       //套餐成人数量
        childrenNumVal: product.value.childrenNum,      //套餐儿童数量
    }; 
    try {
        // 将订单信息存储到本地存储
        uni.setStorageSync('orderInfo', orderInfo);
        uni.showToast({
            title: '保存成功',
            icon: 'success'
        });

        // 跳转到订单创建页面
        uni.navigateTo({
            url: `/premiumRouteSubPack/pages/orderCreated/index?merchantInfo=${encodeURIComponent(merchantInfo)}`
        });
    } catch (e) {
        uni.showToast({
            title: '保存失败，请重试',
            icon: 'none'
        });
        console.error('保存订单信息失败', e);
    }
}
//进入店铺
const enterStore =()=>{
    const id =  dataObj.value.id
    const url = `/premiumRouteSubPack/pages/merchant/index?id=${id}&merchantId=${id}`;
    uni.navigateTo({
        url: url
    });
}
//联系我们
const handleCallPhone = () => {
    uni.makePhoneCall({
      phoneNumber: dataObj.value.contactMobile
    })
  };
</script>

<style lang="scss" scoped>
.page_main{
    // height: 100vh;
    background: #eeefe7;
    padding-bottom: 200rpx;
    .card{
        padding: 56rpx 28rpx 30rpx;
        .swiper{}
        .info{
            .text{
                font-size: 22rpx;
                margin-top: 17rpx;
            }
            .title{
                margin-top: 20rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .name{
                    font-size: 38rpx;
                    font-weight: bold;
                }
                .price{
                    display: flex;
                    align-items: flex-end;
                    white-space: nowrap;
                    color: #AA5414;
                    font-size: 22rpx;
                    justify-content: flex-end;
                    .num{
                        font-size: 36rpx;
                        font-weight: bold;
                    }
                }
            }
            .describe{
                margin-top: 17rpx;
                font-size: 25rpx;
            }
            .tags{
                margin-top: 20rpx;
                :deep(.wd-tag){
                    border: 1rpx solid #1b9c61;
                    margin-right: 12rpx;
                    .wd-tag__text{
                        font-size: 22rpx;
                    }
                }
            }
        }
    }
    .container{
        padding: 40rpx 28rpx;
        background: #fff;
        border-radius: 10rpx;
        margin-bottom: 28rpx;
        .label{
            font-size: 38rpx;
            font-weight: bold;
        }
    }
    .calling_card{
        padding: 46rpx 28rpx 28rpx;
        background: #fff;
        border-radius: 10rpx;
        .card_info{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .card_title{
                .card_n{
                    font-size: 33rpx;
                    font-weight: bold;
                }
                .card_t{
                    font-weight: 29rpx;
                    margin-top: 10rpx;
                }
            }
            .card_btn{
                width: 250rpx;
                height: 70rpx;
                background: #eef0df;
                border-radius: 10rpx;
                font-size: 33rpx;
                margin: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                .iconfont{
                    font-size: 40rpx;
                    margin-right: 10rpx;
                    position: relative;
                    top:-5rpx;
                    color: #AA5414;
                }
            }
        }
        .card_b{
            margin-top: 36rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .card_tag{
                color: #1b9c61;
                border: 1rpx solid #1b9c61;
                border-radius: 10rpx;
                font-size: 29rpx;
            }
            .card_tel{
                display: flex;
                align-items: center;
                .iconfont{
                    color: #1b9c61;
                    margin-right: 8rpx;
                }
            }
        }
    }
    .next{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 17rpx 52rpx;
        padding-bottom: env(safe-area-inset-bottom);
        border: 1rpx solid #C0C2B3;;
        background: #fdffeb;
        z-index: 9;
        display: flex;
        box-sizing: border-box;
        justify-content: flex-end;
        .n_btn{
            width: 164rpx;
            height: 83rpx;
            border-radius: 10rpx;
            margin: 0;
            background: #C0C2B3 ;
            color: #a7a7a7;
            font-size: 33rpx;
        }
        .selected{
            color: #fff;
            background: #AA5414;
        }
    }
}
</style>